<template>
    <Popup :show="showPopup" position="bottom" :style="{ height: '85%' }">
        <div class="content">
            <div class="title">
                <NavBar title="楼盘物理标签">
                    <template #right>
                        <img src="@/assets/img/close-popup.png" alt="" class="close-img" @click="onPopupClosed" />
                    </template>
                </NavBar>
            </div>
            <div class="tag-list">
                <template v-for="(item, index) in tagBulidList" :key="index">
                    <tags-list :title="item.title" :is-multiple="true" :data="item.children" label="desc" value="value" :selection-data="form[item.code]" @click="handleClick($event,item.code)" />
                </template>
            </div>
            <div class="footer">
                <Button type="primary" block class="btn" @click="confirmTag">
                    确定
                </Button>
            </div>
        </div>
    </Popup>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, reactive, ref,onMounted,watch} from 'vue';
import {buildItemModel,buildSetTitleModel} from '@/views/products/selectByTag/selectByTag.module';
import { Popup,NavBar,Button } from 'vant';
import { allBulidTags } from '@/api/selectByTag';
import tagsList from '@/components/tagsList.vue';
import { store } from '@/store';

const emits = defineEmits(['confirm','close']);
const props = defineProps({
    showAction: {
        type: Boolean,
        default: false,
    },
});
const tagBulidArr = ref<buildSetTitleModel[]>([
    {code: 'premisesType',title: '物业类型',children: []},
    {code: 'premisesPrice',title: '楼盘价格',children: []},
    {code: 'premisesAge',title: '楼龄',children: []},
    {code: 'inHouseRate',title: '入住率',children: []},
    {code: 'parkingNum',title: '车位数',children: []},
    {code: 'propertyFee',title: '物业费',children: []},

]);
const showPopup = ref(false);
interface Tag{
    [key: string]: string | number,
}
interface Form{
    [key: string]: Tag[]
}
interface Params{
    [key: string]: number[] | string[]
}
const params = reactive<Params>({
    premisesTypes: [],
    premisesPrices: [],
    premisesAges: [],
    inHouseRates: [],
    parkingNums: [],
    propertyFees: []
});
const form = reactive<Form>({});
const tagBulid = reactive<Form>({});
const tagBulidList = ref<buildSetTitleModel[]>([]);
onMounted(async()=>{
    const tagBulidData = await allBulidTags();
    Object.assign(tagBulid,tagBulidData);
    tagBulidList.value = tagBulidArr.value.map((item:buildSetTitleModel)=>{
        const children = tagBulid[item.code] as unknown as buildItemModel[];
        return{code: item.code,title: item.title,children, };
    });
});
const handleClick =(val:Tag[],code: string) => {
    if(code){
        form[code] = val;
    }
};
const onPopupClosed = ()=>{
    emits('close');
};
const confirmTag = ()=>{
    Object.keys(form).forEach((key:string)=>{
        const itemsList = form[key] as unknown as buildItemModel[];
        params[`${key}s`]= itemsList.map((item:buildItemModel)=>item.value);

    });
    const buildTag = {bulidValue: params,bulidName: form};
    store.commit('app/setBuildTag',buildTag);
    emits('confirm',params);
};
watch(
    () => props.showAction,
    (newVal) => {
        showPopup.value = newVal;
    }
);
</script>

<style lang="scss" scoped>
.close-img {
    width: 20px;
    height: 20px;
}
.content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;

    .tag-list {
        padding: 12px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .footer {
        padding: 6px 12px;
        box-sizing: border-box;
        padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
        padding-bottom: calc(contain(safe-area-inset-bottom) + 6px);
    }
}
::v-deep {
    .van-button {
        background-color: #e60044;
        border: 0;
        border-radius: 6px;
    }
}
.btn {
    height: 38px;
}

</style>
